<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link th:href="@{../assets/css/page.css}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <script th:src="@{../assets/js/html5shiv.js}"></script>
    <script th:src="@{../assets/js/respond.min.js}"></script>
    <![endif]-->
</head>
<body class="inside-header inside-aside ">
<div id="main" role="main">
    <div class="tab-content tab-addtabs">
        <div id="content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <div class="content">
                        <div class="panel panel-default panel-intro">
                            <div class="panel-body">
                                <div id="myTabContent" class="tab-content">
                                    <div class="tab-pane fade active in" id="one">
                                        <div class="widget-body no-padding">
                                            <div id="toolbar" class="toolbar">
                                                <a id="btn-add" href="javascript:onAddItem();" class="btn btn-success btn-add"><i class="fa fa-plus"></i> 新增</a>
                                                 <a id="btn-edit" href="javascript:onEditItem();" class="btn btn-success btn-edit"><i class="fa fa-pencil"></i> 修改</a>
                                                <a href="javascript:onDeleteItem();" class="btn btn-danger btn-del"><i class="fa fa-trash"></i> 删除</a>
                                                <a href="javascript:showVideo();" class="btn btn-success btn-show"><i class="fa fa-eye"></i> 查看监控</a>
                                            </div>
                                            <table id="table" data-toggle="table" class="table table-striped table-bordered table-hover" style="width:100%" data-method="get" data-toolbar="#toolbar"
                                                   data-search="true" data-single-select="false" data-search-text="" data-show-refresh="true" data-show-export="true"
                                                   data-side-pagination="server" data-minimum-count-columns="2" data-pagination="true" data-id-field="iid" data-unique-id="iid"
                                                   data-click-to-select="true" data-page-list="[10, 15,20,30, 60, 80]" data-url="../camera/pageQuery" data-show-footer="false" data-show-toggle="true" data-show-pagination-switch="true" data-show-columns="true">
                                                <thead>
                                                <tr>
                                                    <th data-field="state" data-checkbox="true">state</th>
                                                    <th data-field="iid"   data-formatter="indexFormatter" data-width="50px" data-align="center">序号</th>
                                                    <th data-field="cname">设备名称</th>
                                                    <th data-field="careaname">所属区域</th>
                                                    <th data-field="istatus" data-formatter="useableFormatterForCamera" >是否可用</th>
                                                    <th data-field="cip">ip地址</th>
                                                    <th data-field="cequipment">设备型号</th>
                                                    <th data-field="ccomment">备注</th>
                                                    <th data-field="ccreator">创建人账号</th>
                                                    <th data-field="dcreator">创建时间</th>
                                                </tr>
                                                </thead>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{../assets/libs/jquery/dist/jquery.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap/dist/js/bootstrap.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/toastr/toastr.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/bootstrap-table.min.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/bootstrap-table/dist/extensions/export/bootstrap-table-export.js}"></script>
<script type="text/javascript" th:src="@{../assets/libs/layer/src/layer.js}"></script>
<script type="text/javascript" th:src="@{../assets/js/page.js}"></script>
<script type="text/javascript">
    function showVideo() {
        var rows = $("#table").bootstrapTable('getSelections');
        var rowsLength = rows.length;
        // window.alert(rowsLength);
        // toastr.info(rowsLength,"调试");
        if (rowsLength == 0) {
            toastr.info("请选择后，再操作！", "操作提示");
            return;
        }
        if (rowsLength > 1) {
            toastr.info("只能选择一项数据修改！", "操作提示");
            return;
        }
        var iusable = rows[0].istatus;
        if(iusable == 1){
            toastr.info("该IP不可用，请设置为可用再次操作！", "操作提示");
            return;
        }
        var ip = rows[0].cip;
        if(ip.length == 0){
            toastr.info("请填写IP重试！", "操作提示");
            return;
        }
        // var area = [ $(window).width() > 800 ? '800px' : '95%',
        // $(window).height() > 600 ? '300px' : '95%' ];
        var areaWidth = $(window).width() > 1500 ? "1500px" : "95%";
        var index = layer.open({
            type: 2,
            title: "查看监控",
            shadeClose: false,
            shade: [0.5, "#F0F0F0"],
            maxmin: true,
            moveOut: true,
            offset: "10px",
            area: areaWidth,
            skin: "layui-layer-noborder",
            anim: 5,
            content: "../radiovideo/video?ip="+ip,
            success: function (layero, i) {
                index = i;
                layer.iframeAuto(i);
            }
        })
        layer.full(index);
    }
</script>
</body>
</html>

